<template>
    <div class="header_container">

        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-dropdown @command="handleCommand" menu-align='start'>
<!--            <img :src="baseImgPath + adminInfo.avatar" class="avator">-->
            <img :src="adminInfo.image" class="avator">
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="home">首页</el-dropdown-item>
                <el-dropdown-item command="signout">退出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
    // import {signout} from '@/api/getData'
    import {baseImgPath} from '@/config/env'
    import {mapActions, mapState} from 'vuex'
    import {delCookie, getCookie} from "../utils/cookie";

    export default {
        name:'Header',
        data(){
            return {
                // baseImgPath,
                // adminInfo:{}
            }
        },
        async mounted(){
            console.log('header:adminInfo',this.adminInfo)
            // 前台cookie过期
            var token = getCookie('token');
            if(!token){
                this.$route.push('/login')
            }
            // this.adminInfo = this.$store.state.adminInfo;
            if (!this.adminInfo.id) {
                console.log('获取当前登录的用户信息')
                await this.getAdminData();
                // this.adminInfo.image = this.HOST + this.adminInfo.image;
                console.log('head:admininfo', this.adminInfo)
                if(this.adminInfo ==null ){
                    this.$router.push("/login");
                    console.log('后台session过期')
                } // 后台session过期
            }
        },
        computed: {
            ...mapState(['adminInfo']),
        },
        methods: {
            ...mapActions(['getAdminData']),
            async handleCommand(command) {
                if (command == 'home') {
                    this.$router.push('/home');
                }else if(command == 'signout'){
                    localStorage.clear();
                    delCookie('token');
                    this.$router.push("/login")
                    // const res = await signout()
                    // if (res.status == 1) {
                    //     this.$message({
                    //         type: 'success',
                    //         message: '退出成功'
                    //     });
                    //     this.$router.push('/');
                    // }else{
                    //     this.$message({
                    //         type: 'error',
                    //         message: res.message
                    //     });
                    // }
                }
            },
        }
    }
</script>

<style lang="less">
    @import '../style/mixin';
    .header_container{
        background-color: #EFF2F7;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 20px;
    }
    .avator{
        .wh(36px, 36px);
        border-radius: 50%;
        margin-right: 37px;
    }
    .el-dropdown-menu__item{
        text-align: center;
    }
</style>
